<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<title>随风的简历</title>
	<link href="css/demo.css" rel="stylesheet" type="text/css">
	 <link rel="stylesheet" href="css/jqbar.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" type="text/css" href="css/style.css">
	
	<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/simpletextrotator.css" />
    
   
</head>
<body >

	<div class="container topbottom">
		<div class="row-fluid">

			<div class="span5">
				<img src="img/logo.jpg" alt="Profile Avatar" class="avatar">

				<div class="navigation">
					<div>
						<ul>
							<li>
								<img src="img/about-icon.png">
								<a href="index.html">关于我</a>
							</li>
							<li>
								<img src="img/portfolio-icon.png">
								<a href="portfolio.html">项目经验</a>
							</li>
							<li>
								<img src="img/followme-icon.png">
								<a href="follow.html">教育经历</a>
							</li>
							<li>
								<img src="img/contact-icon.png">
								<a href="contact.html">联系我</a>
							</li>
						</ul>
					</div>
				</div> 			
			</div>

			<div class="span7 homeabout">
				<div class="person">
					<span class="name">罗斌</span>
				</div>
				<div class="desciption home">
					<p>
						我叫罗斌，毕业于湖南信息职业技术学院，移动互联应用专业。是一名Web前端开发工程师，在校期间我这个专业前端，后台，手机端都有涉及。个人比较喜欢Web前端所以通过学习成为了一名Web前端开发工程师中的小白，目前正在找工作。
					</p>
				</div>	
				<div class="row">
					<div class="span12">					
						<!--Google Ad here-->
						<div id="horizontal-ad" >
							<script type="text/javascript"><!--
							google_ad_client = "ca-pub-6472538845369616";
							/* On Demos 2 */
							google_ad_slot = "6440596675";
							google_ad_width = 468;
							google_ad_height = 60;
							//-->
							</script>
							<script type="text/javascript"
							src="//pagead2.googlesyndication.com/pagead/show_ads.js">
							</script>
						</div>					
						<div id="box-ad">
							<script type="text/javascript"><!--
							google_ad_client = "ca-pub-6472538845369616";
							/* GoogleSuggestedForDemo */
							google_ad_slot = "5067431585";
							google_ad_width = 300;
							google_ad_height = 250;
							//-->
							</script>
							<script type="text/javascript"
							src="//pagead2.googlesyndication.com/pagead/show_ads.js">
							</script>
						</div>
						<!--Google ad ends here-->    
					</div>
				</div>
				<div class="row">
					<div class="span6">
						 <div class="bars">
							<div id="bar-1">
							</div>
							<div id="bar-2">
							</div>
							<div id="bar-3">
							</div>
							<div id="bar-4">
							</div>
                           
						</div>
					</div>					
					<div class="span6">
                    	<div class="user-tip"><img src="img/img-tip.png" alt="" /></div>
						<div id="bars-content">
							<div  class="content" id="content-1">HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet.</div>
							<div  class="content" id="content-2">CSS is a style sheet language used for describing the presentation semantics  of a document written in a markup language.</div>
							<div  class="content" id="content-3">As part of web browsers, implementations allow client-side scripts to interact with the user and control the browser.</div>
							<div  class="content" id="content-4">WordPress is an open source blogging tool and a CMS based on PHP and MySQL, which runs on a web hosting service.</div>
							<div  class="content" id="content-5">A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</div>
							<div  class="content" id="content-6">A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</div>
						</div>
					</div>
				</div>			
				
			</div>

		</div>
	</div>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="js/jqbar.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	 $(document).ready(function () {			
		
            $('#bar-1').jqbar({ label: 'HTML5', value: 80, barColor: '#21ba82' });

            $('#bar-2').jqbar({ label: 'CSS', value: 99, barColor: '#21ba82' });

            $('#bar-3').jqbar({ label: 'JavaScript', value: 85, barColor: '#21ba82' });

            $('#bar-4').jqbar({ label: 'WordPress', value: 75, barColor: '#21ba82' });

          
			
			$('#bars-content .content').css({'opacity':'0',display:'none'});
			$('#bars-content .content:eq(0)').css('display','block').animate({opacity:1},1000);
			$('.jqbar:first').addClass('active');
			$('.jqbar').hover(function(){ $(this).addClass('hover');},function(){ $(this).removeClass('hover');});
			$('.jqbar').click(function(){
				$('.jqbar').removeClass('active');
				var id = $(this).addClass('active').attr('id').replace('bar','content');				
				$('#bars-content .content').css({'opacity':'0',display:'none'});
				$('#' + id).css('display','block').animate({opacity:1},1000);
				
			});		
			
			/* $(".rotate").textrotator({
				animation: "spin",
				separator: ",",
				speed: 2000
			  });
			*/
			
        });
		
    </script>
    <script type="text/javascript" src="js/jquery.simple-text-rotator.min.js"></script>
  			
</body>
</html>	